63k+ stars 文本驱动的图表生成工具，开源轻量级！

Mermaid是一个基于JavaScript 的开源绘图和制图工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。Mermaid 图表可以嵌入到网页、Markdown 文件或其他支持 Mermaid 的环境中，并且无需使用图形界面工具即可快速创建图表。

Doc-Rot 是 Mermaid 致力于解决的一个难题。通过简单的文本描述来创建各种类型的图表，包括流程图、序列图、甘特图、类图等。

🎨️ 功能特性

• 开源、免费跨、平台
• 简单易用
• 采用直观的文本描述语法，创建图表简单易懂
• 支持多种图表类型，如流程图、序列图、甘特图、类图、饼图等
• 适合不同的应用场景
• 无需复杂的代码或图形设计技能。
  
• 支持嵌入到网页、Markdown文件、Confluence等环境中

🔥 示例

下面是一些使用 Mermaid 创建的图表示例：

1、流程图

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

2、时序图

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

3、甘特图

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

4、类图

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

5、状态图

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

6、饼图

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

7、Git 图-用户体验旅程图

  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

附项目的链接：

开源地址：https://github.com/mermaid-js/mermaid
官网：http://mermaid.js.org
使用手册：
http://mermaid.js.org/intro
在线体验地址：https://mermaid.live

点关注不迷路

本文发表于公众号【爱编程爱技术】

关注我们，阅读更多精彩内容

往期推荐：